<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>角色表单</title>
</head>
<body>
<div class="container-fluid">
    <div class="row" id="tabs" style="display: none;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <ul class="nav nav-tabs" role="tablist" id="tab-option">
                <li class="active" role="presentation">
                    <a data-toggle="tab" href="#baseInfo" aria-controls="exampleTabsInverseOne" role="tab" aria-expanded="true">
                        角色信息
                    </a>
                </li>
                <li role="presentation" class="">
                    <a data-toggle="tab" href="#extInfo" aria-controls="exampleTabsInverseTwo" role="tab" aria-expanded="false">
                        适用单位
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-content">
        <!--基本信息-->
        <div class="tab-pane active" id="baseInfo" role="tabpanel">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <!--按钮栏-->
                    <div class="form-group button-bar button-bar">
                        <button type="button" isShow="joForm.isAdd" class="btn btn-primary" onclick="joForm.save()">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;新增
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-info" onclick="joForm.update()">
                            <i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
                        </button>
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-danger" onclick="joForm.del()">
                            <i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
                        </button>
                    </div>
                    <!--按钮栏-->
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <form id="pageForm" name="pageForm" action="" method="post">
                        <div class="young-form-item col-md-6">
                            <div class="young-form-label">角色编号</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="id" value="" class="form-control readonly-edit" placeholder="请输入正确的角色编号,为空则使用系统默认编号" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 must">
                            <div class="young-form-label">角色名称</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="name" value="" class="form-control "  ErrEmpty="角色名称不允许为空" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">角色类型</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <select name="type" class="form-control" onchange="roleTypeChange(this.value)" >
                                    <option value=""></option>
                                    <option value="2" selected="selected">普通角色</option>
                                    <option value="1">管理角色</option>
                                </select>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 " id="rangeIdItem" style="display:none;">
                            <div class="young-form-label">管理范围</div>
                            <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('当角色为管理员角色时，可以通过该字段配置当前角色的管理范围',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                            <div class="young-form-input-block">
                                <!--<input type="text"   name="rangeId" value="" class="form-control "   />-->
                                <div class="input-group">
                                    <input type="hidden" id="rangeId" name="rangeId" class="form-control">
                                    <input type="text" id="rangeName" name="rangeName" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceOrg('rangeId', 'rangeName', false)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>

                        <div class="young-form-item col-md-6 must">
                            <div class="young-form-label">所属单位</div>
                            <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('该角色所属单位，默认为当前用户所属单位',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                            <div class="young-form-input-block">
                                <!--<input type="text"   name="companyId" value="" class="form-control "  ErrEmpty="所属单位不允许为空" />-->
                                <div class="input-group">
                                    <input type="hidden" id="companyId" name="companyId" class="form-control">
                                    <input type="text" id="companyName" name="companyName" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="choiceCompany('companyId', 'companyName', false)">
                                    <i class="fa fa-bars" aria-hidden="true"></i>&nbsp;选择
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">角色分类</div>
                            <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('根据业务情况可以使用该字段对角色进行分类，可以为空',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="category" value="" class="form-control "   />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">显示顺序</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="num" value="100" class="form-control "  ErrNumber="显示顺序需填写数字类型" />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">是否向下公开</div>
                            <div class="young-form-tips"><span class="fa fa-info-circle" onmouseover="window.tipsIdx=jo.tips('该角色是否可以在子单位使用',this,{tips:[2, '#3595CC'], time:10000});" onmouseout="jo.close(window.tipsIdx);"></span></div>
                            <div class="young-form-input-block">
                                <select name="open" id="open" value="" class="form-control" ErrNumber="是否向下公开需填写数字类型" onchange="openChange()" >
                                    <option value=""></option>
                                    <option value="0" selected="selected">不公开</option>
                                    <option value="1">向直属下级单位公开</option>
                                    <option value="2">向所有下级单位公开</option>
                                    <option value="3">向部分下级单位公开</option>
                                </select>
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">描述</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="remark" value="" class="form-control "   />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">创建时间</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="createTime" value="" name="createTime" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">更新时间</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text" id="updateTime" value="" name="updateTime" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">创建人</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="createUserId" value="" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">更新人</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <input type="text"   name="updateUserId" value="" class="form-control " readonly  />
                            </div>
                        </div>
                        <div class="young-form-item col-md-6 ">
                            <div class="young-form-label">删除标识</div>
                            <div class="young-form-tips"></div>
                            <div class="young-form-input-block">
                                <select name="trashFlag" value="" class="form-control" ErrNumber="删除标识需填写数字类型" readonly >
                                    <option value=""></option>
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <!--适用单位-->
        <div class="tab-pane" id="extInfo" role="tabpanel">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <!--按钮栏-->
                    <div class="form-group button-bar button-bar">
                        <button type="button" isShow="!joForm.isAdd" class="btn btn-info" onclick="relevance()">
                            <i class="fa fa-exchange" aria-hidden="true"></i>&nbsp;关联可用单位
                        </button>
                    </div>
                    <!--按钮栏-->
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="table-responsive">
                        <input type="hidden" id="relevanceDeptIds" class="form-control ">
                        <table class="table table-bordered table-hover" id="mainList" titleCss="jo-view-table-header" trHandle="itemHandle">
                            <col field="_seq" title="序号" width="5%" align="center"/>
                            <col field="code" title="编码" width="15%" align="" />
                            <col field="name" title="单位名称" width="20%" align=""  />
                            <col field="wholeName" title="全路径" width="30%" align=""  />
                            <!--<col field="_opt" title="操作" width="14%" align=""/>-->
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    layui.laydate.render({
        elem: '#createTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#updateTime' //注册日期控件
    });
    $(function(){
        var jParams = {
            "PKName" : "id",//主键属性名
            "saveAfter" : "toEdit",
            "addUrl" : "{URL_UMS}ums/role/insert",//新增
            "deleteUrl" : "{URL_UMS}ums/role/delete",//删除
            "updateUrl" : "{URL_UMS}ums/role/update",//修改
            "formDataUrl" : "{URL_UMS}ums/role/get",//查询
            //"readonly2Label" : true //只读转文本
        };
        joForm.initFormPage(jParams);//初始化
    });
    //初始化新增页面回调函数(在初始化按钮前发生)
    joForm.initFormPageOfAdd = function(){

    };
    //初始化表单值前处理
    joForm.initFormValueBefore = function(oJson){
        oJson.createTime = jo.formatDate(oJson.createTime);
        oJson.updateTime = jo.formatDate(oJson.updateTime);
    };
    //初始化表单值后处理
    joForm.initFormValueAfter = function(oJson){
        roleTypeChange(oJson.type);//关联角色类型和管理范围
        openChange();//初始化tab
        loadTableData();//加载关联单位
    };
    //新增请求提交前回调函数
    joForm.dealDataAtSaveBefore = function(oJson){

    };
    //修改请求提交前回调函数
    joForm.dealDataAtUpdateBefore = function(oJson){

    };
    /* 关于joForm更多回调函数和配置参数可查看jo-page-form.js */
    //角色类型改变事件,带动管理范围变化
    function roleTypeChange(roleType){
        if(roleType == '1'){//管理类型角色
            $("#rangeIdItem").show();
        }else{
            $("#rangeId").val('');
            $("#rangeIdItem").hide();
        }
    }
    //是否向下公开改变事件
    function openChange(){
        var val = $('#open').val();
        if(val && val == '3'){//当且仅当选中向部分子单位公开时,展示tab
            $('#tabs').slideDown();
        }else{
            $('#tabs').slideUp();
        }
    }

    //加载按钮表格
    function loadTableData(){
        if(joForm.formData.id){
            //加载当前资源的按钮
            Grid('mainList').loadData('{URL_UMS}ums/roleDept/getCompanyListByRoleId?roleId=' + joForm.formData.id);
        }
    }

    //按钮行处理
    function itemHandle(oItem){
        //oItem._show = '<button type="button" isShow="" class="btn-sm '+oItem.buttonClass+'" onclick=""><i class="fa '+oItem.icon+'"></i>&nbsp;'+oItem.name+'</button>';
        //oItem._opt = '<button type="button" class="btn btn-sm btn-danger" onclick="delNavButton(\''+oItem.id+'\',\''+oItem.name+'\')"> <i class="fa fa-remove" aria-hidden="true"></i>&nbsp;移除</button>';
        var relevanceDeptIds = $('#relevanceDeptIds').val();
        if(relevanceDeptIds){
            relevanceDeptIds += "," + oItem.id;
        }else{
            relevanceDeptIds = oItem.id;
        }
        $('#relevanceDeptIds').val(relevanceDeptIds);
    }

    //关联单位
    function relevance(){
        if(!joForm.formData.id){
            jo.showErrorMsg('无效的角色编号');
            return;
        }
        if(!joForm.formData.companyId){
            jo.showErrorMsg('角色所属单位无效');
            return;
        }
        if($('#companyId').val() != joForm.formData.companyId){
            jo.alert('角色所属单位发生了改变,请先保存!');
            return;
        }
        //单位选择
        var idx = choiceCompany('relevanceDeptIds', '', true, joForm.formData.companyId, function(status, ids, names){
            if(status){
                /*if(!ids){
                    jo.showTipsMsg('请选择待关联单位');
                    return;
                }*/
                jo.confirm('您确定要关联当前已选单位（旧的关联单位将被当前选中单位覆盖，若未选中任何单位则会清空已关联单位）?', function(idx2){
                    jo.postAjax('{URL_UMS}ums/roleDept/relevanceDepts2Role', {roleId:joForm.formData.id, deptIds:ids}, function(json){
                        if(json && json.code == 0){
                            jo.showMsg('关联成功', {icon:1});
                            loadTableData();//成功后重新加载
                        }else if(json && json.code == -1){
                            jo.showMsg(json.info, {icon:2});
                        }else{
                            jo.showMsg('关联失败', {icon:2});
                        }
                    }, true);
                    jo.close(idx2);
                    jo.close(idx);
                });
            }
        }, 'relevanceCompanySelect');
    }
</script>
</body>
</html>
